/** 动画参考： https://animate.style/ */

/** 切换菜单 animation 动画系统*/
.submenu-swith-animation {
    .animate__news .submenu-swith-item-box:hover::after {
        animation: animate__news 0.5s linear;
    }

    .animate__moveLeft .submenu-swith-item-box:hover::after {
        animation: animate__moveLeft 0.5s linear;
    }

    .animate__moveTop .submenu-swith-item-box:hover::after {
        animation: animate__moveTop 0.5s linear;
    }

    .animate__fadeIn .submenu-swith-item-box:hover::after {
        animation: animate__fadeIn 0.5s linear;
    }

    .animate__rotate .submenu-swith-item-box:hover::after {
        animation: animate__rotate 0.5s linear;
    }

    .animate__expandTop .submenu-swith-item-box:hover::after {
        animation: animate__expandTop 0.5s linear;
    }

    .animate__expandLeft .submenu-swith-item-box:hover::after {
        animation: animate__expandLeft 0.5s linear;
    }

    .animate__zoomIn .submenu-swith-item-box:hover::after {
        animation: animate__zoomIn 0.5s linear;
    }

    .animate__zoomOut .submenu-swith-item-box:hover::after {
        animation: animate__zoomOut 0.5s linear;
    }

    .animate__bounceIn .submenu-swith-item-box:hover::after {
        animation: animate__bounceIn 0.5s linear;
    }

    .animate__cube .submenu-swith-item-box:hover::after {
        animation: animate__cube 0.5s linear;
    }
}

// 新闻快报
@keyframes animate__news {
    0% {
        opacity: 0;
        transform: rotate(270deg) scale(0);
    }
}

// 左右推入
@keyframes animate__moveLeft {
    0% {
        transform: translateX(-100%);
    }
}

// 上下推入
@keyframes animate__moveTop {
    0% {
        transform: translateY(-100%);
    }
}

// 淡入淡出
@keyframes animate__fadeIn {
    0% {
        opacity: 0;
    }
}

// 旋转
@keyframes animate__rotate {
    0% {
        transform: rotate(270deg);
        opacity: 0;
    }

    100% {
        transform: rotate(360deg);
    }
}

// 上下展开
@keyframes animate__expandTop {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }
}

// 左右展开
@keyframes animate__expandLeft {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
}

// 放大
@keyframes animate__zoomIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
}

// 缩小
@keyframes animate__zoomOut {
    0% {
        transform: scale(2.2);
        opacity: 0;
    }
}

// 弹入弹出
@keyframes animate__bounceIn {
    0% {
        transform: scale(0) translate(0, -100%);
    }
}

// 立方体
@keyframes animate__cube {
    0% {
        transform: rotateY(135deg) rotateX(90deg) skewY(10deg);
        opacity: 0;
    }
}

/** 下列的动画为其他应用模块，与切换、动画、过渡效果无关 **/

// message-box-animation
@keyframes message-box-animation {
    0% {
        top: -20px;
        opacity: 0;
    }
}

// 菜单渐入效果
@keyframes enter-animation {
    0% {
        opacity: 0;
        transform: scaleY(0) translateX(-50%);
    }
}

// 菜单渐出效果
@keyframes leave-animation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes dialog-enter-animation {
    0% {
        opacity: 0;
    }
}

@keyframes dialog-content-enter-animation {
    0% {
        transform: scale(0);
    }
}

@keyframes animation-list-enter-animation {
    0% {
        opacity: 0;
        height: 0;
    }
}